<template>
  <div class="questions-container absolute z-101 left-25vw top-144px">
    <ul class="questions-list py- relative" @touchstart="touchStart" @touchend="touchend">
      <li v-for="item in questionsList.concat(questionsList)" :key="item.id" class="questions-item mb-15px py-4 px-5"
        @click="onChart(item.question_title)">
        <div class="item-content break-words">
          {{ item.question_title }}
          <svg-icon name="more" class="more-icon inline-block" color="transparent" />
        </div>
      </li>
    </ul>
    <div v-show="showScroll" ref="scrollTool"
      class="scroll-tool absolute top-1/2 -right-30 transform -translate-y-1/2 z-1002">
      <svg-icon name="arrows" class="more-icon h-18 relative inline-block" color="transparent" />
      <svg-icon name="finger" class="more-icon fingers h-15 relative inline-block top-5" color="transparent" />
    </div>
  </div>
</template>
<script
  lang="ts"
  name="QuestionList"
  setup
>
import { useTtsaStore } from '@/store/ttsa'

defineEmits(['itemClick'])

// 非响应式变量
let scrollTop = 0
const stepTotal = 8 // 执行完单次问题列表移动动画的帧数，这会影响动画时长。
let timer = null // 问题列表动画定时器
const duration = 3500 // 问题滚动间隔
const scrollTool = ref(null)
const cacheGuide = Boolean(localStorage.getItem('IS_GUIDE')) ? false : true;
const showScroll = ref(cacheGuide)
// stores
const ttsaStore = useTtsaStore()

// computeds
const questionsList = computed(() => ttsaStore.questions)

// 提问
const onChart = (content) => {
  ttsaStore.chat(content)
}

// 执行问题列表移动动画
const runTime = (end: number, ele: Element, step?: number) => {
  let start = scrollTop
  if (!step) {
    step = 1
  }
  // 目标位置 - 初始位置，除以总步数 = 每一步的步长
  const stepSize = (end - start) / stepTotal
  window.requestAnimationFrame(() => {
    // 初始位置+步数*步长 = 当前scrollTop 的位置
    ele.scrollTop = start + stepSize * step
    if (step <= stepTotal) {
      runTime(end, ele, ++step)
    } else {
      scrollTop = ele.scrollTop = end
    }
  })
}
// 初始化问题列表动画
const initAnimation = () => {
  const root = document.querySelector('.questions-list')
  const list = document.querySelectorAll('.questions-list>li')
  // 获取计算单个li内容高度
  const eleHeight = list[0].getBoundingClientRect().height
  const liMargin = Number(getComputedStyle(list[0]).marginBottom.slice(0, -2) || 0)
  const boxHeight = eleHeight + liMargin
  const contHeight = list.length * boxHeight
  let i = 0
  // 如果当前滚动到某个位置了，则动画从当前位置开始执行
  if (root.scrollTop) {
    i = root.scrollTop / boxHeight | 0 || 0
    scrollTop = root.scrollTop
  }
  // 启动一个每隔 duration 执行一次的定时器，动画主引擎
  timer = setInterval(() => {
    let scrollValue = (eleHeight + liMargin) * ++i
    // 滚动到底之后重置
    if (scrollValue > contHeight - root.clientHeight) {
      scrollValue = 0
      i = 0
    }
    // 用于执行动画的方法
    runTime(scrollValue, root)
  }, duration)
}
// 清除问题列表动画
const clearAnimation = () => {
  clearInterval(timer)
}
// 用户滑动问题列表时取消动画
const touchStart = () => {
  clearAnimation()
}
// 用户滑动问题列表结束时初始化动画
const touchend = () => {
  initAnimation()
}

const animationEnd = () => {
  showScroll.value = false
  localStorage.setItem('IS_GUIDE', JSON.stringify(false))
}

onMounted(() => {
  initAnimation()
  const scrollElement: HTMLElement = scrollTool?.value;
  scrollElement?.addEventListener("animationend", animationEnd);
})

onBeforeUnmount(() => {
  clearAnimation()
  const scrollElement: HTMLElement = scrollTool?.value;
  scrollElement?.addEventListener("animationend", animationEnd);
})

</script>

<style
  lang="scss"
  scoped
>
:deep(.more-icon) {
  img {
    width: auto !important;
  }
}

.questions-container {
  .questions-list {
    @apply overflow-x-hidden overflow-y-scroll z-0;
    scrollbar-width: none;
    max-width: 311px;
    max-height: 400px;
    background: transparent;
    mask: linear-gradient(transparent 0, black 20px, black 370px, transparent 100%);
    -webkit-mask: linear-gradient(transparent 0, black 20px, black 370px, transparent 100%);

    &::-webkit-scrollbar {
      display: none;
    }

    .questions-item {
      width: 311px;
      min-height: 30px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.4) 100%);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 1);
      backdrop-filter: blur(20px);
      cursor: pointer;

      &:first-child {
        margin-block-start: 30px;
      }

      &:last-child {
        margin-inline-end: 30px;
      }

      .item-content {
        font-size: 16px;
        font-weight: 500;
        color: #3B5379;
        line-height: 28px;
        letter-spacing: 1px;
        user-select: none;
      }
    }
  }

  .scroll-tool {
    .fingers {
      animation: move 2s ease-in-out both;

      @keyframes move {
        0% {
          transform: translateY(0px);
        }

        30% {
          transform: translateY(-30px);
        }

        60% {
          transform: translateY(30px);
        }

        100% {
          transform: translateY(0px);
        }
      }
    }
  }
}
</style>
